<template>
  <div class="admin-dashboard">
    <!-- 侧边导航栏 -->
    <div class="sidebar">
      <div class="logo">
        <i class="icon-shield"></i>
        <span>管理员系统</span>
      </div>
      <nav class="menu">
        <router-link
            v-for="route in adminRoutes"
            :key="route.name"
            :to="{ name: route.name }"
            active-class="active"
        >
          <i :class="`icon-${route.icon}`"></i>{{ route.title }}
        </router-link>
      </nav>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <header class="top-bar">
        <div class="breadcrumb">
          <span v-for="(item, index) in breadcrumbs" :key="index">
            <span v-if="index > 0">/</span>
            {{ item }}
          </span>
        </div>
        <div class="user-info">
          <span>管理员</span>
          <i class="icon-user"></i>
        </div>
      </header>

      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      adminRoutes: [
        { name: 'UserManagement', title: '用户管理', icon: 'users' },
        { name: 'BlogManagement', title: '博客管理', icon: 'file-text' },
        { name: 'ActivityManagement', title: '活动管理', icon: 'calendar' },
        { name: 'PartitionManagement', title: '分区管理', icon: 'layers' },
        { name: 'FeedbackManagement', title: '用户反馈', icon: 'message-square' }
      ],
      breadcrumbs: ['仪表盘']
    }
  },
  watch: {
    $route(to) {
      this.updateBreadcrumbs(to);
    }
  },
  created() {
    this.updateBreadcrumbs(this.$route);
  },
  methods: {
    updateBreadcrumbs(route) {
      const matchedRoute = this.adminRoutes.find(r => r.name === route.name);
      this.breadcrumbs = ['仪表盘', matchedRoute?.title || route.name];
    }
  }
}
</script>

<style scoped>
/* 保持之前的样式不变 */
</style>